<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getCourseMeta } from '@/api/PersonalSpace/trainingCamp'
import CourseCard from './courseCard.vue';
const props = defineProps({
  coursesTag: String, // 课程标签
});

// 定义课程信息接口，根据 response 中 data.courses 的结构定义
interface CourseInfo {
  courseId: string;// 课程ID
  teacherId: string;// 教师ID
  folderId: string | null;// 文件夹ID
  courseName: string;// 课程名称
  courseTag: string;// 课程标签
  courseImage: string;// 课程图片URL
  teacher: string | null;// 教师信息
  courseDescription: string;// 课程描述
  viewNum: number | null;// 观看次数
  createdAt: string | null;// 创建时间
  updatedAt: string | null;// 更新时间
  iscourseComplete: number;// 课程完成状态（0 或 1）
  otherComplete: boolean;
}

// 定义 `courses` 状态，用于保存课程列表数据
const courses = ref<CourseInfo[]>([]);

// 定义 `loadCourseInfo` 函数，根据获取到的课程数据更新 `courses`
const loadCourseInfo = (courseData: CourseInfo[]) => {
  // 将 `courseData` 映射到 `courses` 中
  courses.value = courseData.map(course => ({
    courseId: course.courseId,
    teacherId: course.teacherId,
    folderId: course.folderId,
    courseName: course.courseName,
    courseTag: course.courseTag,
    courseImage: course.courseImage,
    teacher: course.teacher,
    courseDescription: course.courseDescription,
    viewNum: course.viewNum,
    createdAt: course.createdAt,
    updatedAt: course.updatedAt,
    iscourseComplete: course.iscourseComplete,
    otherComplete: course.otherComplete,
  }));
};

// 获取课程信息函数，传入 `coursesTag` 参数用于搜索内容
const fetchCourseMeta = async (coursesTag: string) => {
  try {
    // console.log('coursesTag', coursesTag);
    // 调用 API 获取课程信息，并将 `coursesTag` 传递给它
    const response = await getCourseMeta(coursesTag);
    // console.log('response', response);
    loadCourseInfo(response.courses);
    // console.log('courses', courses);
  }
  catch (error) {
    console.error("replayCourse.vue 获取课程信息失败: ", error);
  }
};

onMounted(() => {
  fetchCourseMeta(props.coursesTag || '');
});

// 表格列定义，新增图片列
const columns = [
  {
    title: '课程信息',
    key: 'courseInfo',
    align: 'center',
  },
];
</script>

<template>
  <a-layout class="content-layout">
    <a-table :columns="columns" :data-source="courses" :pagination="{ pageSize: 5 }" row-key="courseId" :show-header="false">
      <!-- 使用 v-slot:bodyCell 插槽自定义 CampCard 的渲染 -->
      <template #bodyCell="{ column, record }">
        <!-- 根据 column.key 判断是否渲染自定义内容 -->
        <CourseCard
          v-if="column.key === 'courseInfo'"
          :course-id="record.courseId"
          :course-name="record.courseName"
          :course-description="record.courseDescription"
          :course-image="record.courseImage"
          :iscourse-complete="record.iscourseComplete"
          :other-complete="record.otherComplete"
        />
      </template>
    </a-table>
  </a-layout>
</template>

<style scoped lang="scss">
.content-layout {
  width: 100%;
  margin-bottom: 1.5em;
}

/* 自定义图片样式 */
.camp-image {
  width: 100px; /* 图片宽度 */
  height: 100px; /* 图片高度 */
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px; /* 圆角 */
}

/* 自定义列样式，将“训练营名称、时间、举办方”横向显示 */
.camp-info {
  display: flex; /* 横向排列 */
  flex-direction: row;
  justify-content: space-between; /* 均匀分布 */
  width: 100%;
}

/* 每个字段项样式，水平排列 */
.camp-item {
  margin-right: 2rem; /* 每个信息项之间的间距 */
  white-space: nowrap; /* 防止内容换行 */
}
</style>
